Digital Clock Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock & Timer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="stars"></div>
<div class="theme-toggle">
<button id="themeToggle">🌙</button>
</div>
<div class="container">
<div class="clock-container">
<h2>Digital Clock</h2>
<div id="clock" class="display">00:00:00</div>
</div>
<div class="timer-container">
<h2>Countdown Timer</h2>
<div id="timer" class="display">00:00:00</div>
<div id="timerStatus" class="timer-status"></div>
<div class="controls">
<input type="number" id="hours" min="0" max="23" placeholder="HH">
<input type="number" id="minutes" min="0" max="59" placeholder="MM">
<input type="number" id="seconds" min="0" max="59" placeholder="SS">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
</div>
<audio id="timerSound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU" preload="auto"></audio>
<script src="script.js"></script>
</body>
</html>
Digital Clock CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
:root {
--bg-color: #f0f2f5;
--container-bg: white;
--text-color: #333;
--display-bg: #ecf0f1;
--display-text: #2c3e50;
--input-border: #ddd;
}
[data-theme="dark"] {
--bg-color: #0a0a1a;
--container-bg: rgba(45, 45, 45, 0.9);
--text-color: #f0f0f0;
--display-bg: rgba(61, 61, 61, 0.9);
--display-text: #ffffff;
--input-border: #555;
}
body {
background-color: var(--bg-color);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
overflow: hidden;
position: relative;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
[data-theme="dark"] .stars {
opacity: 1;
}
.stars::before,
.stars::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 160px 120px, #fff, rgba(0,0,0,0));
background-repeat: repeat;
background-size: 200px 200px;
animation: stars 8s linear infinite;
}
.stars::after {
background-image:
radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 160px 120px, #fff, rgba(0,0,0,0));
background-size: 200px 200px;
animation: stars 8s linear infinite;
animation-delay: -4s;
}
@keyframes stars {
from { transform: translateY(0);}
to { transform: translateY(-200px);}
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
}
#themeToggle {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
background-color: var(--container-bg);
color: var(--text-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
background-color: var(--container-bg);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
transition: background-color 0.3s ease;
}
.clock-container, .timer-container {
margin-bottom: 2rem;
text-align: center;
}
h2 {
color: var(--text-color);
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.display {
font-size: 3rem;
font-weight: bold;
color: var(--display-text);
background-color: var(--display-bg);
padding: 1rem;
border-radius: 5px;
margin-bottom: 1rem;
transition: background-color 0.3s ease, color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.display span {
font-size: 1.5rem;
opacity: 0.8;
}
.controls {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
input {
width: 60px;
padding: 0.5rem;
text-align: center;
border: 1px solid var(--input-border);
border-radius: 5px;
font-size: 1rem;
background-color: var(--container-bg);
color: var(--text-color);
transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
button {
padding: 0.5rem 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
#start { background-color: #2ecc71; color: white; }
#stop { background-color: #e74c3c; color: white; }
#reset { background-color: #3498db; color: white; }
button:hover { opacity: 0.9; }
.timer-status {
font-size: 1.2rem;
color: var(--text-color);
margin: 0.5rem 0;
min-height: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.timer-status.completed {
color: #2ecc71;
font-weight: bold;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1);}
50% { transform: scale(1.05);}
100% { transform: scale(1);}
}
Digital clock js
// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
function setTheme(isDark) {
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
themeToggle.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
// Check for saved theme preference or use system preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme === 'dark');
} else {
setTheme(prefersDarkScheme.matches);
}
// Toggle theme on button click
themeToggle.addEventListener('click', () => {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
setTheme(!isDark);
});
// Listen for system theme changes
prefersDarkScheme.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.matches);
}
});
// Digital Clock
function updateClock() {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const ampm = hours >= 12 ? 'PM' : 'AM';
// Convert to 12-hour format
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
const clockDisplay = document.getElementById('clock');
clockDisplay.innerHTML = `${hours}:${minutes}:${seconds} ${ampm}`;
}
// Update clock every second
setInterval(updateClock, 1000);
updateClock(); // Initial call
// Timer functionality
let timerInterval;
let timeLeft = 0;
const timerSound = document.getElementById('timerSound');
const timerStatus = document.getElementById('timerStatus');
let alarmInterval;
// Generate bell sound
function generateBellSound() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(880, audioContext.currentTime); // A5 note
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
// Create a bell-like envelope
gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.1);
gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.5);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.5);
}
function startAlarm() {
// Play initial sound
generateBellSound();
// Set up interval to play sound every second for 10 seconds
let secondsLeft = 10;
alarmInterval = setInterval(() => {
if (secondsLeft > 0) {
generateBellSound();
secondsLeft--;
} else {
clearInterval(alarmInterval);
}
}, 1000);
}
function stopAlarm() {
if (alarmInterval) {
clearInterval(alarmInterval);
}
}
function updateTimerDisplay() {
const hours = Math.floor(timeLeft / 3600);
const minutes = Math.floor((timeLeft % 3600) / 60);
const seconds = timeLeft % 60;
document.getElementById('timer').textContent =
`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
function startTimer() {
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
const seconds = parseInt(document.getElementById('seconds').value) || 0;
timeLeft = hours * 3600 + minutes * 60 + seconds;
if (timeLeft <= 0) {
timerStatus.textContent = 'Please enter a valid time!';
timerStatus.style.color = '#e74c3c';
return;
}
timerStatus.textContent = '';
timerStatus.classList.remove('completed');
updateTimerDisplay();
if (timerInterval) {
clearInterval(timerInterval);
}
timerInterval = setInterval(() => {
if (timeLeft > 0) {
timeLeft--;
updateTimerDisplay();
} else {
clearInterval(timerInterval);
startAlarm();
timerStatus.textContent = 'Timer Completed!';
timerStatus.classList.add('completed');
}
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
stopAlarm();
timerStatus.textContent = 'Timer Stopped';
timerStatus.classList.remove('completed');
}
function resetTimer() {
clearInterval(timerInterval);
stopAlarm();
timeLeft = 0;
document.getElementById('hours').value = '';
document.getElementById('minutes').value = '';
document.getElementById('seconds').value = '';
timerStatus.textContent = '';
timerStatus.classList.remove('completed');
updateTimerDisplay();
}
// Event listeners
document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('stop').addEventListener('click', stopTimer);
document.getElementById('reset').addEventListener('click', resetTimer);